<!--
<template>
  <div class="common-layout">
    <el-container class="el-container">
      <el-header class="header" >
        <div :class="{'header-container':true,'scroll-header':scrollHeader}">
          <div class="logo-container" >
            <img src="..\..\assets\images\logo.gif" />
          </div>
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              text-color="black"
              active-text-color="#ee9d26"

          >
            <el-menu-item index="/AllMain"  @click="$router.push('/')">首页</el-menu-item>
            <el-sub-menu index="2">
              <template #title>机场信息</template>
              <el-sub-menu index="2-1">
                <template #title>离港航班</template>
                <el-menu-item index="2-2" @click="$router.push({name:'inFlight'})">离港中转航班</el-menu-item>
                <el-menu-item index="2-3" @click="$router.push('/inFlightNext')">离港直达航班</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3-1">
                <template #title>进港航班</template>
                <el-menu-item index="3-2" @click="$router.push({name:'abroadFlight'})">进港中转航班</el-menu-item>
                <el-menu-item index="3-3" @click="$router.push({name:'abroadFlightNext'})">进港直达航班</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="4"@click="$router.push({name:'luggage'})">行李托运</el-menu-item>
            <el-menu-item index="5">辅助工具</el-menu-item>
            <el-menu-item index="6">联系我们</el-menu-item>
            <el-menu-item index="/login"   @click="$router.push({name:'login'})">登录/注册</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-main style="&#45;&#45;el-main-padding: 0px">

        <div class="card-container">
          <el-card class="box-card">
            <div class="txt">快速航班查询</div>
            <el-form-item class="date-select">
              &lt;!&ndash;            <label>日期</label>&ndash;&gt;
              <el-date-picker
                  type="date"
                  placeholder="请选择日期"
                  v-model="form.dtime"
                  style="width: 200px;"
                  @change="updateDateTime"
              ></el-date-picker>
            </el-form-item>
            <el-form ref="form" :model="form">
              <el-input
                  class="elInner"
                  placeholder="请输入航班号"
                  style="width: 190px"
                  v-model="form.dfltFlno"
              ></el-input>

            </el-form>
            <el-button class="btn1" type="primary" @click="onSubmit">
              <el-icon><Search /></el-icon> 查询</el-button
            >
          </el-card>
        </div>

        <div class="common-layout">
          <el-container>
            <el-main>
              &lt;!&ndash; 数据表 &ndash;&gt;
              <el-table
                  ref="singleTable"
                  border
                  :data="tableData"
                  highlight-current-row
                  style="width: 100%"
                  :row-class-name="tableRowClassName"
                  class="tableStyle"
              >
                <el-table-column property="dfltFlno" label="航班号" width="100">
                </el-table-column>
                <el-table-column
                    property="dfltAwcd"
                    label="航空公司"
                    width="200"
                >
                </el-table-column>
                <el-table-column property="apcd" label="航线" width="150">
                </el-table-column>
                <el-table-column property="code" label="登机门" width="100">
                </el-table-column>
                <el-table-column property="fcdp" label="值机柜台" width="100">
                </el-table-column>
                <el-table-column property="dtime" label="日期" width="200">
                </el-table-column>
                <el-table-column
                    property="fptt"
                    label="预计起飞时间"
                    width="220"
                >
                </el-table-column>
                <el-table-column
                    property="frtt"
                    label="实际起飞"
                    width="220"
                >
                </el-table-column>
                <el-table-column label="状态" width="150">
                  <template #default="scope">
                    <span>{{ scope.row.checkStatus }}</span>
                  </template>
                </el-table-column>
              </el-table>
              &lt;!&ndash; 分页组件 &ndash;&gt;
              <el-pagination
                  class="tableStyle"
                  background
                  layout="prev, pager, next"
                  :total="count"
                  :current-page="page"
                  :pageCount="pageCount"
                  @current-change="changePage"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </div>
      </el-main>
      <el-footer style="&#45;&#45;el-footer-padding: 0 0">
        <div class="bottombar-container">
          <div class="content">
            <div class="box">
              <dl>
                <dt>航班信息</dt>
                <dd>出发航班</dd>
                <dd>到达航班</dd>
              </dl>
            </div>
            <div class="box">
              <dl>
                <dt>交通指南</dt>
                <dd>停车场</dd>
                <dd>市区班车</dd>
                <dd>旅客直通车</dd>
                <dd>出租车</dd>
                <dd>摆渡车</dd>
              </dl>
            </div>
            <div class="box">
              <dl>
                <dt>机场周边</dt>
                <dd>美食服务</dd>
                <dd>旅游景区</dd>
              </dl>
            </div>
            <div class="box">
              <dl>
                <dt>旅客须知</dt>
                <dd>乘机指南</dd>
                <dd>爱心服务</dd>
                <dd>失物招领</dd>
                <dd>常用电话</dd>
              </dl>
            </div>
            <div class="box">
              <dl>
                <dt>航班延误</dt>
                <dd>联系我们</dd>
                <dd>改签退票</dd>
              </dl>
            </div>
            <div class="box last">
              <dl>
                <dt>关注我们</dt>
                <dd>
                  <img src="/src/assets/images/gongzhonghao.png" alt="" />
                </dd>
                <dd>微信添加公众号</dd>
              </dl>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style scoped>
.el-menu-demo{
  background-color: transparent !important;
  color: #fff;
  width: 600px;
  position: absolute;
  top: 30px;
  right: 60px;
  border: none;
  z-index: 2;
}
.logo-container {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 2; /* 调整logo容器的层级 */
}
.header-container{
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  z-index: 2;
}
.scroll-header{
  height: 85px;
  background-color: #fff;
  transition: height 0.5s ease, background-color 0.5s ease;
}
.header {
  /*background-color: blue;*/
  /* 给头部设置一下弹性布局 */
  display: flex;
  /* 让它贴标左右对齐 */
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  /*background: rgba(0, 0, 0, 0.39);*/
  position: relative;
  background-image:url('/src/assets/images/flight1.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 370px;
}
.tableStyle {
  /*margin-left: 110px;*/
}
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.txt{
  font-size: 20px;
  font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
  font-weight: 700;
  color: #2b2b2b;
  line-height: 52px;
  padding-right: 20px;
  display: inline-block;
}
.box-card {
  width: 900px;
  height: 90px;
}


.elInner {
  display: inline-block;
  position: relative;
  bottom: 52px;
  right: 308px;
  float:right;
  font-size: 14px;
  font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
  font-weight: 700;
  color: #2b2b2b;
  border: 1px solid #dcdfe6;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  transition: border-color.2s cubic-bezier(.645,.045,.355,1);
}
.btn1{
  display: inline-block;
  position: relative;
  left: 590px;
  bottom: 52px;
  width: 200px;
  color: #184789;
}

.bottombar-container {
  min-width: 1120px;
  overflow: hidden;
  background: #184789;
  padding-bottom: 30px;
  position: relative;
}
.content {
  width: 1120px;
  margin: 0 auto;
  padding-right: 40px;
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
}
.box {
  width: 160px;
  /*color: white;*/
}
.bottombar-container .content .box dt {
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: 700;
  color: white;
  line-height: 22px;
  margin-bottom: 23px;
}

dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.bottombar-container .content .box dd {
  margin: 0;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #fff;
  line-height: 18px;
  margin-bottom: 12px;
  cursor: pointer;
}
.bottombar-container .content .box dd img {
  width: 122px;
  height: 122px;
}

.date-select{
  display: inline-block;
  position: relative;
}
</style>


<script>
import { ElMessageBox } from "element-plus";
import axios from "axios";
import { ref } from "vue";
export default {
  name: "inFlightNext",
  data() {
    return {
      selectLabel: 0,
      tableDataType: 1,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}],
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      categoryData: "",
      images: [
        { id: 1, url: "/src/assets/images/img_1.png" },
        { id: 2, url: "/src/assets/images/img_2.png" },
      ],
      form: {
        dfltFlno: this.$route.query.dfltFlno||"",
        dtime: this.$route.query.dtime||"",
      },
    };
  },
  methods: {
    handleScroll(){
      // 获取滚动的垂直位置
      const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 判断滚动位置是否超过表头的位置
      this.scrollHeader = scrollY > 100 // 这里的 值 是一个示例的值，请根据实际情况调整
      const header = document.querySelector('.header-container')

      if (this.scrollHeader) {
        header.classList.add('scroll-header')
      } else {
        header.classList.remove('scroll-header')
      }
      // 可根据需要添加其他样式的修改逻辑
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.flag === 1) {
        return "orange-text";
      }
      if (row.flag === 2) {
        return "red-text";
      }
      return "";
    },
    changePage(currentPage) {
      this.page = currentPage;
      switch (this.tableDataType) {
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },
    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
          .get("http://localhost:8888/homepage/homePageTransferListD", {
            params: { pageNum, pageSize },
          })
          .then((response) => {
            const result = response.data.data;
            this.count = result.size;
            this.pageCount = Math.ceil(result.total / pageSize);
            this.tableData = result.list;
            this.tableDataType = 1;
            this.tableData.forEach((item) => {
              const flag = item.flag;
              switch (flag) {
                case 0:
                  item.checkStatus = "正常";
                  break;
                case 1:
                  item.checkStatus = "延误";

                  break;
                case 2:
                  item.checkStatus = "取消";

                  break;
                default:
                  item.checkStatus = "未知状态";
                  break;
              }
            });
          })
          .catch((error) => {
            console.error(error);
          });
    },

    onSubmit() {
      const pageNum = this.page;
      const pageSize = 10;
      const dfltFlno = this.form.dfltFlno;
      const dtime = this.form.dtime;
      this.$axios
          .get("http://localhost:8888/homepage/selectHomePageTransferD", {
            params: {
              dfltFlno,
              dtime,
              pageNum,
              pageSize,
            },
          })
          .then((response) => {
            const result = response.data.data;
            console.info(result);
            if (response.data.status != 10000) {
              this.$message.error({
                type: "error",
                message: "查询失败，没有数据",
              });
            }
            //   console.info(result);
            this.count = result.size;
            this.pageCount = Math.ceil(result.total / pageSize);
            this.tableData = result.list;
            if (result.list.length != 0 && !this.called) {
              this.tableDataType = 2;
              this.$message.success({
                type: "success",
                message: "查询成功",
              });
              // this.called = true;
            }
          });
    },
  },
  mounted() {
    this.fetchData();
    if(this.form.dfltFlno!=""||this.form.dtime!=""){
      this.onSubmit();
    }
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    // 在组件销毁前移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll)
  },
};
</script>-->
